<template>
	<view class="create-schedule-container">
		<!-- 头部基本信息 -->
		<view class="header-info">
			<view class="basic-info">
				<view class="info-section">
					<view class="info-item">
						<uni-icons type="calendar" size="18" color="#1BAE76"></uni-icons>
						<picker mode="date" :value="scheduleData.date" @change="onDateChange">
							<view class="picker-content">
								<text class="info-text">{{ scheduleData.date || '选择比赛日期' }}</text>
							</view>
						</picker>
					</view>
					
					<view class="info-item">
						<uni-icons type="location" size="18" color="#1BAE76"></uni-icons>
						<input 
							class="info-input" 
							v-model="scheduleData.venue" 
							placeholder="请输入比赛地点"
							maxlength="50"
						/>
					</view>
				</view>
				
				<view class="add-slot-in-header">
					<button class="add-slot-btn-header" @click="showSlotModal">
						<uni-icons type="plus" size="20" color="#fff"></uni-icons>
						<text class="add-text">添加比赛场次</text>
					</button>
				</view>
			</view>
		</view>
		
		<!-- 时段列表 -->
		<view class="time-slots-section">
			<view class="section-header">
				<text class="section-title">比赛时段安排</text>
				<text class="slot-count">共{{ timeSlots.length }}个时段</text>
			</view>
			
			<view class="time-slots-list">
				<view 
					v-for="(slot, index) in timeSlots" 
					:key="slot.id"
					class="time-slot-card"
					@click="editSlot(index)"
				>
					<!-- 时段头部信息 -->
					<view class="slot-header">
						<view class="slot-basic-info">
							<view class="time-info">
								<uni-icons type="clock" size="14" color="#007aff"></uni-icons>
								<text class="time-text">{{ slot.start_time }}-{{ slot.end_time }}</text>
							</view>
							<view class="field-info">
								<uni-icons type="home" size="14" color="#ff9500"></uni-icons>
								<text class="field-text">{{ slot.field || '未设置场地' }}</text>
							</view>
						</view>
						
						<view class="slot-actions">
							<button class="action-btn edit-btn" @click.stop="editSlot(index)">
								<uni-icons type="compose" size="16" color="#007aff"></uni-icons>
							</button>
							<button class="action-btn delete-btn" @click.stop="deleteSlot(index)">
								<uni-icons type="trash" size="16" color="#ff3b30"></uni-icons>
							</button>
						</view>
					</view>
					
					<!-- 对阵信息 -->
					<view class="match-teams">
						<view class="team-card home-team">
							<text class="team-type">主</text>
							<text class="team-name">{{ slot.home_team }}</text>
						</view>
						<view class="team-card away-team">
							<text class="team-type">客</text>
							<text class="team-name">{{ slot.away_team }}</text>
						</view>
					</view>
					
					<!-- 裁判需求 -->
					<view class="referee-requirements">
						<uni-icons type="staff" size="14" color="#9b59b6"></uni-icons>
						<text class="referee-text">{{ formatRefereeRequirements(slot.referee_requirements) }}</text>
					</view>
				</view>
			</view>
		</view>
		

		
		<!-- 时段编辑弹窗 -->
		<uni-popup ref="slotModal" type="center" :safe-area="false" :mask="true" :mask-click="false" background-color="rgba(0,0,0,0.6)">
			<view class="slot-modal">
				<view class="modal-header">
					<text class="modal-title">{{ isEditMode ? '编辑时段' : '添加时段' }}</text>
					<button class="close-btn" @click="closeSlotModal">
						<uni-icons type="close" size="20" color="#666"></uni-icons>
					</button>
				</view>
				
				<scroll-view class="modal-content" scroll-y>
					<!-- 时间设置 -->
					<view class="form-section">
						<text class="section-title">时间设置</text>
						<view class="form-row">
							<view class="form-item">
								<text class="form-label">开始时间</text>
								<picker mode="time" :value="currentSlot.start_time" @change="onStartTimeChange">
									<view class="picker-input">
										<text class="picker-text">{{ currentSlot.start_time || '选择时间' }}</text>
										<uni-icons type="clock" size="16" color="#999"></uni-icons>
									</view>
								</picker>
							</view>
							
							<view class="form-item">
								<text class="form-label">结束时间</text>
								<picker mode="time" :value="currentSlot.end_time" @change="onEndTimeChange">
									<view class="picker-input">
										<text class="picker-text">{{ currentSlot.end_time || '选择时间' }}</text>
										<uni-icons type="clock" size="16" color="#999"></uni-icons>
									</view>
								</picker>
							</view>
						</view>
						
						<view class="form-item">
							<text class="form-label">比赛场地</text>
							<input 
								class="form-input" 
								v-model="currentSlot.field" 
								placeholder="请输入具体场地（如：A区1号场、B区主场）"
								maxlength="30"
							/>
						</view>
					</view>
					
					<!-- 对阵信息 -->
					<view class="form-section">
						<text class="section-title">对阵信息</text>
						<view class="form-row">
							<view class="form-item">
								<text class="form-label">主队</text>
								<input 
									class="form-input" 
									v-model="currentSlot.home_team" 
									placeholder="请输入主队名称"
									maxlength="20"
								/>
							</view>
							
							<view class="form-item">
								<text class="form-label">客队</text>
								<input 
									class="form-input" 
									v-model="currentSlot.away_team" 
									placeholder="请输入客队名称"
									maxlength="20"
								/>
							</view>
						</view>
						
						<view class="form-item">
							<text class="form-label">比赛类别</text>
							<picker :range="categoryOptions" @change="onCategoryChange">
								<view class="picker-input">
									<text class="picker-text">{{ currentSlot.category || '选择比赛类别' }}</text>
									<uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
								</view>
							</picker>
						</view>
					</view>
					
					<!-- 裁判需求 -->
					<view class="form-section">
						<text class="section-title">裁判人数</text>
						<view class="section-tip">
							<text class="tip-text">💡 此处设置的是裁判需求，实际报名不设上限</text>
						</view>
						<view class="referee-requirements-form">
							<view 
								v-for="(position, index) in refereePositions" 
								:key="position.key"
								class="requirement-item"
							>
								<text class="position-name">{{ position.name }}</text>
								<view class="count-input">
									<button 
										class="count-btn" 
										@click="decreaseCount(position.key)"
										:disabled="(currentSlot.referee_requirements[position.key] || 0) <= 0"
									>-</button>
									<text class="count-text">{{ currentSlot.referee_requirements[position.key] || 0 }}</text>
									<button class="count-btn" @click="increaseCount(position.key)">+</button>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 备注信息 -->
					<view class="form-section">
						<text class="section-title">备注信息</text>
						<view class="form-item">
							<textarea 
								class="form-textarea" 
								v-model="currentSlot.notes" 
								placeholder="请输入备注信息（可选）"
								maxlength="200"
							></textarea>
						</view>
					</view>
				</scroll-view>
				
				<view class="modal-footer">
					<button class="cancel-btn" @click="closeSlotModal">取消</button>
					<button class="confirm-btn" @click="confirmSlot">{{ isEditMode ? '更新' : '添加' }}</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 底部操作区域 -->
		<view class="bottom-actions">
			<button class="draft-btn" @click="saveDraft" :disabled="timeSlots.length === 0">
				<uni-icons type="folder-add" size="16" color="#666"></uni-icons>
				<text class="draft-text">保存草稿</text>
			</button>
			<button class="save-btn" @click="saveSchedule" :disabled="!scheduleData.date || !scheduleData.venue || timeSlots.length === 0">
				{{ mode === 'edit' ? '更新比赛日程' : '发布比赛日程' }}
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			matchId: '',
			matchInfo: {},
			saving: false,
			
			// 操作模式：'create' 创建，'edit' 编辑
			mode: 'create',
			scheduleId: '',
			
			// 日程基本信息
			scheduleData: {
				date: '',
				venue: ''
			},
			
			// 时段列表
			timeSlots: [],
			
			// 时段编辑相关
			isEditMode: false,
			editingSlotIndex: -1,
			currentSlot: {
				id: '',
				start_time: '',
				end_time: '',
				field: '',
				home_team: '',
				away_team: '',
				category: '',
				referee_requirements: {},
				notes: ''
			},
			
			// 配置选项
			categoryOptions: ['男子组', '女子组', '混合组', '青少年组', '成人组'],
			refereePositions: [
				{ key: 'main_referee', name: '主裁判' },
				{ key: 'assistant_referee', name: '助理裁判' },
				{ key: 'fourth_official', name: '第四官员' },
				{ key: 'referee_supervisor', name: '裁判监督' }
			]
		}
	},
	
	onLoad(options) {
		if (options.matchId) {
			this.matchId = options.matchId
			this.mode = options.mode || 'create'
			this.scheduleId = options.scheduleId || ''
			
			console.log('页面模式:', this.mode, '日程ID:', this.scheduleId)
			
			this.loadMatchInfo()
			
			if (this.mode === 'edit' && this.scheduleId) {
				// 编辑模式：加载现有日程数据
				this.loadExistingSchedule()
				uni.setNavigationBarTitle({
					title: '编辑比赛日程'
				})
			} else {
				// 创建模式：重置数据
				this.resetAllData()
				uni.setNavigationBarTitle({
					title: '创建比赛日程'
				})
			}
		}
	},
	
	onUnload() {
		// 页面卸载时清理数据
		this.resetAllData()
	},
	
	methods: {
		// 加载比赛信息
		async loadMatchInfo() {
			try {
				const matchObject = uniCloud.importObject('match-object')
				const result = await matchObject.getMatchDetail(this.matchId)
				
				if (result.code === 0) {
					this.matchInfo = result.data
				} else {
					this.handleError(result.message || '获取比赛信息失败')
				}
			} catch (error) {
				this.handleError('网络错误: ' + error.message)
			}
		},
		
		// 加载已有日程数据（编辑模式）
		async loadExistingSchedule() {
			try {
				const scheduleObject = uniCloud.importObject('match-schedule-object')
				
				if (this.mode === 'edit' && this.scheduleId) {
					// 编辑模式：加载指定的日程
					const result = await scheduleObject.getScheduleDetail(this.scheduleId)
					
					if (result.code === 0 && result.data) {
						const schedule = result.data
						this.scheduleData.date = schedule.date
						this.scheduleData.venue = schedule.venue
						
						// 转换时段数据
						if (schedule.time_slots && schedule.time_slots.length > 0) {
							this.timeSlots = schedule.time_slots.map(slot => ({
								id: slot.slot_id || this.generateSlotId(),
								start_time: slot.start_time,
								end_time: slot.end_time,
								field: slot.field || slot.venue,
								home_team: slot.home_team,
								away_team: slot.away_team,
								category: slot.category,
								referee_requirements: slot.referee_requirements || {},
								notes: slot.notes || ''
							}))
						}
						
						console.log('编辑模式数据加载成功:', schedule)
					} else {
						this.handleError(result.message || '加载日程数据失败')
					}
				} else {
					// 创建模式：检查是否有同日期的日程
					const result = await scheduleObject.getMatchSchedules(this.matchId)
					
					if (result.code === 0 && result.data.list && result.data.list.length > 0) {
						// 检查是否有同日期的日程
						const sameDateSchedules = result.data.list.filter(schedule => 
							schedule.date === this.scheduleData.date && schedule._id !== this.scheduleId
						)
						
						if (sameDateSchedules.length > 0) {
							// 提示用户有同日期的日程
							uni.showModal({
								title: '提示',
								content: `当前日期(${this.scheduleData.date})已存在${sameDateSchedules.length}个日程安排，继续创建将作为新的日程，不会覆盖已有日程。是否继续？`,
								confirmText: '继续创建',
								cancelText: '重新选择',
								success: (res) => {
									if (!res.confirm) {
										// 用户选择重新选择，清空日期
										this.scheduleData.date = ''
									}
								}
							})
						}
					}
				}
			} catch (error) {
				console.error('加载日程数据失败:', error)
				this.handleError('加载日程数据失败: ' + error.message)
			}
		},
		
		// 日期选择
		async onDateChange(e) {
			const newDate = e.detail.value
			
			// 如果是编辑模式且日期没有改变，直接返回
			if (this.mode === 'edit' && newDate === this.scheduleData.date) {
				return
			}
			
			try {
				const scheduleObject = uniCloud.importObject('match-schedule-object')
				const result = await scheduleObject.getMatchSchedules(this.matchId)
				
				if (result.code === 0 && result.data.list) {
					// 检查是否有同日期的日程
					const sameDateSchedules = result.data.list.filter(schedule => 
						schedule.date === newDate && schedule._id !== this.scheduleId
					)
					
					if (sameDateSchedules.length > 0) {
						// 提示用户有同日期的日程
						uni.showModal({
							title: '提示',
							content: `${newDate}已存在${sameDateSchedules.length}个日程安排，继续创建将作为新的日程，不会覆盖已有日程。是否继续？`,
							confirmText: '继续创建',
							cancelText: '重新选择',
							success: (res) => {
								if (res.confirm) {
									this.scheduleData.date = newDate
								}
							}
						})
					} else {
						// 没有同日期的日程，直接设置
						this.scheduleData.date = newDate
					}
				}
			} catch (error) {
				console.error('检查日期冲突失败:', error)
				// 发生错误时仍然允许设置日期，但给出提示
				this.handleError('检查日期时发生错误，请谨慎操作')
				this.scheduleData.date = newDate
			}
		},
		
		// 显示时段编辑模态框
		showSlotModal() {
			this.isEditMode = false
			this.editingSlotIndex = -1
			this.resetCurrentSlot()
			this.$refs.slotModal.open()
		},
		
		// 编辑时段
		editSlot(index) {
			this.isEditMode = true
			this.editingSlotIndex = index
			this.currentSlot = { ...this.timeSlots[index] }
			this.$refs.slotModal.open()
		},
		
		// 删除时段
		deleteSlot(index) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个比赛时段吗？',
				success: (res) => {
					if (res.confirm) {
						this.timeSlots.splice(index, 1)
						this.showToast('时段已删除')
					}
				}
			})
		},
		
		// 关闭时段编辑模态框
		closeSlotModal() {
			this.$refs.slotModal.close()
		},
		
		// 重置当前时段数据
		resetCurrentSlot() {
			this.currentSlot = {
				id: this.generateSlotId(),
				start_time: '',
				end_time: '',
				field: '',
				home_team: '',
				away_team: '',
				category: '',
				referee_requirements: {},
				notes: ''
			}
		},
		
		// 重置所有数据（确保每次创建新日程时数据清零）
		resetAllData() {
			this.scheduleData = {
				date: '',
				venue: ''
			}
			this.timeSlots = []
			this.isEditMode = false
			this.editingSlotIndex = -1
			this.resetCurrentSlot()
		},
		
		// 生成时段ID
		generateSlotId() {
			return 'slot_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
		},
		
		// 时间选择
		onStartTimeChange(e) {
			this.currentSlot.start_time = e.detail.value
		},
		
		onEndTimeChange(e) {
			this.currentSlot.end_time = e.detail.value
		},
		
		// 比赛类别选择
		onCategoryChange(e) {
			this.currentSlot.category = this.categoryOptions[e.detail.value]
		},
		
		// 裁判需求数量调整
		increaseCount(positionKey) {
			if (!this.currentSlot.referee_requirements[positionKey]) {
				this.$set(this.currentSlot.referee_requirements, positionKey, 0)
			}
			this.currentSlot.referee_requirements[positionKey]++
		},
		
		decreaseCount(positionKey) {
			if (this.currentSlot.referee_requirements[positionKey] > 0) {
				this.currentSlot.referee_requirements[positionKey]--
			}
		},
		
		// 确认时段
		confirmSlot() {
			// 验证必填项
			if (!this.currentSlot.start_time || !this.currentSlot.end_time) {
				this.showToast('请选择开始和结束时间')
				return
			}
			
			if (!this.currentSlot.home_team || !this.currentSlot.away_team) {
				this.showToast('请输入对阵双方')
				return
			}
			
			if (!this.currentSlot.field) {
				this.showToast('请输入比赛场地，以避免场地冲突')
				return
			}
			
			// 验证时间逻辑
			if (this.currentSlot.start_time >= this.currentSlot.end_time) {
				this.showToast('结束时间必须晚于开始时间')
				return
			}
			
			// 检查时间冲突
			if (this.checkTimeConflict()) {
				this.showToast('该场地在所选时间段已有其他比赛')
				return
			}
			
			if (this.isEditMode) {
				// 更新时段
				this.$set(this.timeSlots, this.editingSlotIndex, { ...this.currentSlot })
				this.showToast('时段已更新')
			} else {
				// 添加新时段
				this.timeSlots.push({ ...this.currentSlot })
				this.showToast('时段已添加')
			}
			
			this.closeSlotModal()
		},
		
		// 检查时间冲突
		checkTimeConflict() {
			const currentStart = this.currentSlot.start_time
			const currentEnd = this.currentSlot.end_time
			const currentField = this.currentSlot.field
			
			// 如果没有设置场地，不检查冲突
			if (!currentField) {
				return false
			}
			
			for (let i = 0; i < this.timeSlots.length; i++) {
				if (this.isEditMode && i === this.editingSlotIndex) {
					continue // 跳过正在编辑的时段
				}
				
				const slot = this.timeSlots[i]
				
				// 只有在同一场地的情况下才检查时间冲突
				if (slot.field === currentField) {
					// 检查时间是否重叠
					if (!(currentEnd <= slot.start_time || currentStart >= slot.end_time)) {
						return true
					}
				}
			}
			return false
		},
		
		// 格式化裁判需求显示（建议人数）
		formatRefereeRequirements(requirements) {
			if (!requirements || typeof requirements !== 'object') {
				return '暂无建议'
			}
			
			const parts = []
			this.refereePositions.forEach(position => {
				const count = requirements[position.key]
				if (count && count > 0) {
					parts.push(`${position.name}${count}人`)
				}
			})
			
			return parts.length > 0 ? `建议：${parts.join('、')}` : '暂无建议'
		},
		
		// 保存草稿
		async saveDraft() {
			// 草稿只需要有时段即可，不强制要求日期和场地
			if (this.timeSlots.length === 0) {
				this.showToast('至少需要添加一个比赛时段')
				return
			}
			
			this.saving = true
			
			try {
				const scheduleObject = uniCloud.importObject('match-schedule-object')
				const scheduleData = {
					match_id: this.matchId,
					date: this.scheduleData.date || new Date().toISOString().split('T')[0], // 如果没有日期，使用今天
					venue: this.scheduleData.venue || '待定',
					mode: this.mode,
					is_draft: true, // 标记为草稿
					time_slots: this.timeSlots.map(slot => ({
						slot_id: slot.id,
						start_time: slot.start_time,
						end_time: slot.end_time,
						field: slot.field,
						home_team: slot.home_team,
						away_team: slot.away_team,
						category: slot.category,
						referee_requirements: slot.referee_requirements,
						notes: slot.notes,
						status: 'draft'
					}))
				}
				
				// 编辑模式需要传入日程ID
				if (this.mode === 'edit' && this.scheduleId) {
					scheduleData.schedule_id = this.scheduleId
				}
				
				console.log('保存草稿数据:', scheduleData)
				
				const result = await scheduleObject.createMultiSlotSchedule(scheduleData)
				
				if (result.code === 0) {
					this.showToast(result.message)
					
					// 如果是新建草稿，切换到编辑模式
					if (this.mode === 'create' && result.data.id) {
						this.mode = 'edit'
						this.scheduleId = result.data.id
						console.log('切换到编辑模式，日程ID:', this.scheduleId)
					}
				} else {
					this.handleError(result.message || '保存草稿失败')
				}
			} catch (error) {
				console.error('保存草稿失败:', error)
				this.handleError('网络错误: ' + error.message)
			} finally {
				this.saving = false
			}
		},
		
		// 保存日程
		async saveSchedule() {
			if (!this.validateSchedule()) {
				return
			}
			
			this.saving = true
				
			try {
				const scheduleObject = uniCloud.importObject('match-schedule-object')
				const scheduleData = {
					match_id: this.matchId,
					date: this.scheduleData.date,
					venue: this.scheduleData.venue,
					mode: this.mode,
					is_draft: false, // 标记为正式发布
					time_slots: this.timeSlots.map(slot => ({
						slot_id: slot.id,
						start_time: slot.start_time,
						end_time: slot.end_time,
						field: slot.field,
						home_team: slot.home_team,
						away_team: slot.away_team,
						category: slot.category,
						referee_requirements: slot.referee_requirements,
						notes: slot.notes,
						status: 'open'
					}))
				}
				
				// 编辑模式需要传入日程ID
				if (this.mode === 'edit' && this.scheduleId) {
					scheduleData.schedule_id = this.scheduleId
				}
				
				console.log('保存日程数据:', scheduleData)
				
				const result = await scheduleObject.createMultiSlotSchedule(scheduleData)
				
				if (result.code === 0) {
					const message = this.mode === 'edit' ? '比赛日程更新成功' : '比赛日程发布成功'
					this.showToast(message)
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					this.handleError(result.message || '操作失败')
				}
			} catch (error) {
				console.error('保存比赛日程失败:', error)
				this.handleError('网络错误: ' + error.message)
			} finally {
				this.saving = false
			}
		},
		
		// 验证日程数据
		validateSchedule() {
			if (!this.scheduleData.date) {
				this.showToast('请选择比赛日期')
				return false
			}
			
			if (!this.scheduleData.venue) {
				this.showToast('请输入比赛场地')
				return false
			}
			
			if (this.timeSlots.length === 0) {
				this.showToast('请至少添加一个比赛时段')
				return false
			}
			
			// 验证每个时段的完整性
			for (let i = 0; i < this.timeSlots.length; i++) {
				const slot = this.timeSlots[i]
				if (!slot.start_time || !slot.end_time) {
					this.showToast(`时段${i + 1}的时间不完整`)
				return false
			}
				if (!slot.home_team || !slot.away_team) {
					this.showToast(`时段${i + 1}的对阵信息不完整`)
					return false
				}
			}
			
			return true
		},
		
		// 通用工具方法
		showToast(message) {
			uni.showToast({
				title: message,
				icon: 'none',
				duration: 2000
			})
		},
		
		handleError(message) {
			console.error(message)
			this.showToast(message)
		}
	}
}
</script>

<style lang="scss" scoped>
.create-schedule-container {
	min-height: 100vh;
	background-color: #f8f9fa;
	padding-bottom: 120rpx;
}

/* 头部信息区域 */
.header-info {
	background: linear-gradient(135deg, #a8b5ff 0%, #b8a5d6 100%);
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	color: white;
}

.basic-info {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12rpx;
	padding: 20rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.info-section {
	flex: 1;
}

.add-slot-in-header {
	flex-shrink: 0;
}

.info-item {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 16rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.picker-content, .info-input {
	flex: 1;
	font-size: 28rpx;
	color: white;
	background: transparent;
	border: none;
}

.info-text {
	color: white;
}

/* 时段列表区域 */
.time-slots-section {
	margin: 20rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.slot-count {
	font-size: 24rpx;
	color: #666;
	background: #f0f8ff;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
}

.time-slots-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.time-slot-card {
	background: white;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
}

.slot-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.slot-basic-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.time-info, .field-info {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.time-text, .field-text {
	font-size: 24rpx;
	color: #666;
}

.slot-actions {
	display: flex;
	gap: 12rpx;
}

.action-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	
	&.edit-btn {
		background: #e3f2fd;
	}
	
	&.delete-btn {
		background: #ffebee;
	}
}

/* 对阵信息样式 */
.match-teams {
	display: flex;
	height: 72rpx;
	margin: 20rpx 0;
	position: relative;
	gap: 8rpx;
}

.team-card {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 32rpx;
	
	&.home-team {
		background: #00aff0 ;
		clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
		
		.team-type {
			left: 32rpx;
		}
		
		.team-name {
			padding-left: 48rpx;
		}
	}
	
	&.away-team {
		background: #e54c5e;
		clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
		
		.team-type {
			left: 32rpx;
		}
		
		.team-name {
			padding-left: 48rpx;
		}
	}
}

.team-type {
	position: absolute;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

.team-name {
	font-size: 28rpx;
	color: white;
	font-weight: bold;
}

.referee-requirements {
	display: flex;
	align-items: center;
	gap: 12rpx;
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 2rpx solid #f0f0f0;
}

.referee-text {
	font-size: 24rpx;
	color: #666;
}

/* 头部添加按钮 */
.add-slot-btn-header {
	padding: 16rpx 24rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	font-size: 24rpx;
	font-weight: bold;
	white-space: nowrap;
}

/* 模态框样式 - 优化版 */
.slot-modal {
	width: 92vw;
	max-width: 700rpx;
	max-height: 85vh;
	background: white;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
	border: 4rpx solid #f0f0f0;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.modal-title {
	font-size: 32rpx;
	font-weight: bold;
	color: white;
}

.close-btn {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	padding: 12rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-content {
	max-height: 60vh;
	padding: 24rpx;
	overflow-y: auto;
}

.form-section {
	margin-bottom: 32rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
	padding: 24rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.section-title::before {
	content: '';
	width: 6rpx;
	height: 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 3rpx;
}

.section-tip {
	margin-bottom: 20rpx;
	padding: 16rpx 20rpx;
	background: #fff3cd;
	border-radius: 12rpx;
	border-left: 6rpx solid #ffc107;
}

.tip-text {
	font-size: 24rpx;
	color: #856404;
	line-height: 1.4;
}

.form-row {
	display: flex;
	gap: 16rpx;
}

.form-item {
	flex: 1;
	margin-bottom: 20rpx;
	min-width: 0; /* 防止flex子项溢出 */
}

.form-label {
	display: block;
	font-size: 24rpx;
	color: #666;
	margin-bottom: 8rpx;
	font-weight: 500;
}

.form-input {
	width: 100%;
	padding: 20rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	font-size: 26rpx;
	background: white;
	box-sizing: border-box;
	transition: all 0.3s ease;
	min-height: 80rpx;
	
	&:focus {
		border-color: #667eea;
		background: white;
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
	}
}

.picker-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	background: white;
	box-sizing: border-box;
	transition: all 0.3s ease;
	min-height: 80rpx;
	
	&:active {
		border-color: #667eea;
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
	}
}

.picker-text {
	font-size: 26rpx;
	color: #333;
	flex: 1;
}

.form-textarea {
	width: 100%;
	min-height: 100rpx;
	max-height: 200rpx;
	padding: 16rpx 20rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	font-size: 26rpx;
	background: white;
	box-sizing: border-box;
	resize: none;
	transition: all 0.3s ease;
	
	&:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
	}
}

.referee-requirements-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12rpx;
}

.requirement-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 16rpx;
	background: white;
	border-radius: 12rpx;
	border: 2rpx solid #e0e0e0;
	transition: all 0.3s ease;
}

.requirement-item:hover {
	border-color: #667eea;
	box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.1);
}

.position-name {
	font-size: 24rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 12rpx;
	text-align: center;
}

.count-input {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.count-btn {
	width: 56rpx;
	height: 56rpx;
	border-radius: 12rpx;
	border: 2rpx solid #667eea;
	background: white;
	color: #667eea;
	font-size: 24rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.9);
		background: #667eea;
		color: white;
	}
	
	&:disabled {
		border-color: #ddd;
		color: #ddd;
		background: #f5f5f5;
	}
}

.count-text {
	font-size: 26rpx;
	font-weight: bold;
	color: #333;
	min-width: 48rpx;
	text-align: center;
	background: #f0f0f0;
	padding: 8rpx 12rpx;
	border-radius: 8rpx;
}

.modal-footer {
	display: flex;
	gap: 16rpx;
	padding: 24rpx;
	border-top: 2rpx solid #f0f0f0;
	background: #fafafa;
}

.cancel-btn, .confirm-btn {
	flex: 1;
	padding: 20rpx 0;
	border: none;
	border-radius: 12rpx;
	font-size: 26rpx;
	font-weight: bold;
	transition: all 0.3s ease;
}

.cancel-btn {
	background: #f5f5f5;
	color: #666;
	border: 2rpx solid #e0e0e0;
	
	&:active {
		transform: scale(0.98);
		background: #e8e8e8;
	}
}

.confirm-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.4);
	}
}

/* 底部操作区域 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	gap: 20rpx;
	padding: 30rpx 20rpx;
	background: white;
	border-top: 2rpx solid #f0f0f0;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.draft-btn, .save-btn {
	flex: 1;
	padding: 24rpx 0;
	border: none;
	border-radius: 12rpx;
	font-size: 28rpx;
	font-weight: bold;
}
	
.draft-btn {
	background: #f8f9fa;
	color: #666;
	border: 2rpx solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	
	&:disabled {
		opacity: 0.5;
	}
}

.draft-text {
	color: #666;
}

.save-btn {
	background: linear-gradient(135deg, #1BAE76 0%, #16a085 100%);
	color: white;
	
	&:disabled {
		background: #ccc;
	}
}
</style> 